<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<style>
    .search-input {
        padding: 10px 15px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        width: 100%;
        height: 200px;
        outline: none;
    }

    .search-button {
        padding: 10px 20px;
        background-color: #4285f4;
        color: white;
        border: none;
        /* border-radius: 0 4px 4px 0; */
        cursor: pointer;
        font-size: 16px;
        width: 50%;
    }

    .search-button:hover {
        background-color: #3367d6;
    }
</style>
<script>
    function read() {
        const url = new URL('/api/tts', window.location.origin);
        url.searchParams.append('text', document.getElementById('searchInput').value)
        const audio = new Audio(url.toString());
        audio.play()
    }
    function performSearch() {
        const url = new URL('/api/tts', window.location.origin);
        url.searchParams.append('text', document.getElementById('searchInput').value)
        window.open(url.toString(), '_blank')
    }
</script>
<div height="24px" style="display: flex;">
    <button class="search-button" onclick="performSearch()"><svg version="1.1" width="24" height="24" id="Capa_1"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29.978 29.978"
            xml:space="preserve">
            <style>
                path {
                    fill: white;
                }
            </style>
            <g>
                <path
                    d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z" />
                <path
                    d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z" />
        </svg></button>
    <button class="search-button" onclick="read()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
        </svg></button>
</div>
<textarea class="search-input" id="searchInput" style="height: calc( 100% - 48px );"></textarea>